<template>
<div class='container'>
  <el-card>
    <el-form label-width="100px" >
      <el-row>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="requestParams.keyword"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18"  style="text-align:right"><el-form-item >
          <el-button size="mini"  @click="clear">清除</el-button>
            <el-button size="mini" type="primary" @click="filter()">搜索</el-button>
          </el-form-item>
        </el-col>
     </el-row>
    </el-form>
      <el-form>
         <el-alert
        :title="`数据一共 ${total} 条`"
        style="margin-bottom:10px"
        :closable="false"
        show-icon
      ></el-alert>
        <el-table
      :data="list"
      style="width: 100%"

      >
      <el-table-column
        label="编号" prop="id" align="center" >
      </el-table-column>
      <el-table-column

        label="题型" align="center">
         <template #default="{row}">
            {{questionType.find(item=>item.value===+row.questionType).label}}
          </template>
      </el-table-column>
      <el-table-column

        label="题目编号" align="center" width="200px">
       <template #default="{row}">
         <div  v-for="item in row.questionIDs" :key="item.number">
           <a href="#" style='color:blue' @click.prevent="yulan(item)">
           {{item.number}}
           </a>
         </div>
     </template>

      </el-table-column>
      <el-table-column

        label="录入时间" prop="addTime" align="center">
      </el-table-column>
      <el-table-column

        label="答题时间（s）" prop="totalSeconds" align="center">
      </el-table-column>
      <el-table-column

        label="正确率（%）" prop="accuracyRate" align="center">
      </el-table-column>
      <el-table-column
        label="录入人" prop="userName" align="center">
      </el-table-column>
      <el-table-column

        label="操作" align="center">
     <template #default="{row}">
         <el-button type="danger" icon="el-icon-delete" circle  @click="delShuju(row.id)"></el-button>
     </template>
      </el-table-column>
    </el-table>
      </el-form>
    <div style=" text-align:right" >
          <el-pagination
            :current-page="requestParams.page"
            :page-sizes="[20,30,50,100]"
            :page-size="requestParams.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
  </el-card>
  <QuestionsPreview ref="questionPreview" :data="questionInfo"></QuestionsPreview>
</div>

</template>

<script>
import QuestionsPreview from '../components/questions-preview.vue'
import { questionType } from '@/api/hmmm/constants.js'
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      questionInfo: {},
      value: '',
      questionType,
      list: [],
      total: 0,
      requestParams: {
        page: 1,
        pagesize: 20,
        keyword: null
      }

    }
  },

  created () {
    this.getShuju()
  },
  methods: {

    yulan (questionInfo) {
      this.questionInfo = questionInfo
      console.log(questionInfo)
      this.$nextTick(() => {
        this.$refs.questionPreview.open()
      })
    },
    clear () {
      this.requestParams.keyword = ''
    },
    filter () {
      this.requestParams.page = 1
      this.getShuju()
    },
    async getShuju () {
      const { data } = await randoms(this.requestParams)
      console.log(data)
      this.list = data.items
      console.log(this.list)
      this.total = data.counts
    },
    delShuju (id) {
      this.$confirm('该操作将永久删除数据', '温馨提示').then(async () => {
        const res = await removeRandoms({ id })
        console.log(res)
        this.$message.success('删除数据成功')
        if (this.list.length === 1 && this.requestParams.page > 1) {
          this.requestParams.page--
        }
        this.getShuju()
      }).catch(() => {
        console.log('取消')
      }
      )
    },
    handleCurrentChange (val) {
      this.requestParams.page = val
      this.getShuju()
    },
    handleSizeChange (val) {
      this.requestParams.pagesize = val
      this.requestParams.page = 1
      this.getShuju()
    }
  }
}
</script>

<style scoped lang='less'>

</style>
